<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0,user-scalable=no" />
        <meta http-equiv="content" content="text/html; charset=UTF-8" />
        <title>SnapShotControl 2.0: Simple Example</title>
        <!--
        <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
        -->
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry">
        </script>
        <script type="text/javascript">
            document.write('<script type="text/javascript" src="../src/snapshotcontrol' + (document.location.search.indexOf('packed') > -1 ? '_packed' : '') + '.js"><' + '/script>');
        </script>
        <script type="text/javascript">
            function initialize() {
              var cLatLng = new google.maps.LatLng(35.676148, 139.74479);
              var mapOpts = {
                zoom: 8,
                center: cLatLng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
              };
              var mapCanvas = new google.maps.Map(document.getElementById("map_canvas"), mapOpts);
              
              // add control
              var snapOpts = {
                map: mapCanvas
              };
              var snapShotControl = new SnapShotControl(snapOpts);
              
              //draw a circle
              rad = 30 * 1000; //30km
              var draw_circle = new google.maps.Circle({
                center: cLatLng,
                radius: rad,
                strokeColor: "#FF00FF",
                strokeOpacity: 0.8,
                strokeWeight: 4,
                fillColor: "#00FF00",
                fillOpacity: 0.35,
                map: mapCanvas
              });
            }
        </script>
    </head>
    <body onload="initialize()">
        <div id="map_canvas" style="width: 400px; height: 400px">
        </div>
    </body>
</html>
